<template>
  <v-card class="stat-card" :class="`border-${color}`">
    <v-card-text class="pa-4">
      <div class="d-flex align-center justify-space-between">
        <div class="flex-grow-1">
          <p class="text-subtitle-2 text-medium-emphasis mb-1">{{ title }}</p>
          <h2 class="text-h4 font-weight-bold" :class="`text-${color}`">{{ formattedValue }}</h2>
          <div v-if="subtitle" class="text-caption text-medium-emphasis mt-1">
            {{ subtitle }}
          </div>
        </div>
        <div class="stat-icon">
          <v-avatar :color="color" size="48" class="elevation-2">
            <v-icon :color="iconColor" size="24">{{ icon }}</v-icon>
          </v-avatar>
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: [Number, String],
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'primary'
  },
  subtitle: {
    type: String,
    default: ''
  },
  format: {
    type: String,
    default: 'number' // 'number', 'currency', 'percentage'
  }
})

const formattedValue = computed(() => {
  const value = props.value
  
  switch (props.format) {
    case 'currency':
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY'
      }).format(value)
    case 'percentage':
      return `${value}%`
    default:
      return new Intl.NumberFormat('zh-CN').format(value)
  }
})

const iconColor = computed(() => {
  // 根据颜色返回合适的图标颜色
  const lightColors = ['yellow', 'orange', 'lime']
  return lightColors.includes(props.color) ? 'black' : 'white'
})
</script>

<style scoped>
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 4px solid transparent;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.border-primary {
  border-left-color: rgb(var(--v-theme-primary));
}

.border-secondary {
  border-left-color: rgb(var(--v-theme-secondary));
}

.border-success {
  border-left-color: rgb(var(--v-theme-success));
}

.border-warning {
  border-left-color: rgb(var(--v-theme-warning));
}

.border-error {
  border-left-color: rgb(var(--v-theme-error));
}

.border-info {
  border-left-color: rgb(var(--v-theme-info));
}

.border-green {
  border-left-color: #4caf50;
}

.border-blue {
  border-left-color: #2196f3;
}

.border-orange {
  border-left-color: #ff9800;
}

.border-red {
  border-left-color: #f44336;
}

.text-green {
  color: #4caf50;
}

.text-blue {
  color: #2196f3;
}

.text-orange {
  color: #ff9800;
}

.text-red {
  color: #f44336;
}

.stat-icon {
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .stat-card .v-card-text {
    padding: 16px !important;
  }
  
  .text-h4 {
    font-size: 1.5rem !important;
  }
  
  .v-avatar {
    width: 40px !important;
    height: 40px !important;
  }
  
  .v-icon {
    font-size: 20px !important;
  }
}

/* 加载动画 */
.stat-card {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
